<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./swiper-4.5.0/dist/css/swiper.min.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
    <header>

        <div class="logo">
            <div class="logo-img">
                <a href=""><img src="./images/d3b374babc734361b7f4f6578f7f6af7.jpeg" alt=""></a>
            </div>
            <div class="logo-vp">
                <p>个人主页</p>
                <p>丨I'am YangPeng</p>
            </div>
            <div class="logo-text">
                <ul>
                    <li><a href="">主页</a></li>
                    <li id="list_1"><a href="#one">个人简介</a></li>
                    <li id="list_2"><a href="#two">技能掌握</a></li>
                    <li id="list_3"><a href="#three">作品</a></li>
                    <li><a href="http://yang1275833191.gitee.io/personal_blog">博客</a></li>
                    <li><a href="#four">联系</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="main">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/02.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./images/hui03.PNG" alt=""></div>
                <div class="swiper-slide"><img src="./images/hui02.jpg" alt=""></div>

                </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="eng">
                <div class="text">
                    <h2>Hello, I'm Yang</h2>
                    <h4>Life doesn’t get easier, you just get stronger</h4>
                    <p class="W-p1">我叫Yang</p>
                    <p class="W-p2">一名前端开发工程师</p>
                </div>
            </div>

        </div>
        <div class="ti">
            <div class="sheng">
                <img src="./images/ti.jpg" alt="">
            </div>
            <div class="sheng sheng-1">
                <img src="./images/ti.jpg" alt="">
            </div>
        </div>
        <div class="geren">
            <div class="geren-bg" id="one">
                    <div class="ceng-ge">
                            <div class="geren-text" id="geren_text">
                                <h2>个人简介</h2>
                                <p><span>姓名：</span>杨鹏</p>
                                <p><span>性别：</span>男</p>
                                <p><span>年龄：</span>20岁</p>
                                <p><span>联系电话：</span>185-3164-0716</p>
                                <p><span>邮箱：</span>1275833191@qq.com</p>
                                <p><span>住址：</span>河北省廊坊市</p>
                            </div>
                            <div class="ping" id="ping">
                                <h3>自我评价</h3>
                                <div id="showStr" style="color: white"></div>
                                <p style="display:none" id="string">严谨务实，以诚待人，团队协作能力强，
                                    吃苦耐劳，工作上有动手能力且有较强的学习能力，
                                    敢于面对挑战，具有良好的适应性和做事认真负责。
                                </p>
                            </div>
                            <div class="touxiang" id="touxiang">
                                <img src="./images/d3b374babc734361b7f4f6578f7f6af7.jpeg" alt="">
                            </div>
                    </div>


            </div>
        </div>
        <div class="ti">
            <div class="sheng">
                <img src="./images/ti.jpg" alt="">
            </div>
            <div class="sheng sheng-1">
                <img src="./images/ti.jpg" alt="">
            </div>
        </div>
        <div class="xuexi" id="two">
            <div class="xuexi-bg">
                <div class="xue-ceng" id="xue_ceng">
                    <h1>Skills</h1>
                    <div class="bai">
                        <canvas id="canvas1"></canvas>
                        <p>HTML5</p>
                        <div class="xue-k">
                            <div class="xue-te">
                                <p>超文本标记语言,是一种用于创建网页的标准标记语言。</p>
                                <p>您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析</p>
                            </div>
                        </div>
                    </div>
                    <div class="bai">
                        <canvas id="canvas2"></canvas>
                        <p>CSS3</p>
                        <div class="xue-k">
                            <div class="xue-te">
                                <p>CSS 指层叠样式表 (Cascading Style Sheets)。</p>
                                <p>样式定义如何显示 HTML 元素</p>
                            </div>
                        </div>
                    </div>
                    <div class="bai">
                        <canvas id="canvas3"></canvas>
                        <p>JavaScript</p>
                        <div class="xue-k">
                            <div class="xue-te">
                                <p>avaScript 是互联网上最流行的脚本语言。</p>
                                <p>JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。</p>
                            </div>
                        </div>
                    </div>
                    <div class="bai">
                        <canvas id="canvas4"></canvas>
                        <p>JQuery</p>
                        <div class="xue-k">
                            <div class="xue-te">
                                <p>jQuery是一个JavaScript函数库。</p>
                                <p>jQuery是一个轻量级的"写的少，做的多"的JavaScript库。</p>
                            </div>
                        </div>
                    </div>
                    <div class="bai">
                        <canvas id="canvas5"></canvas>
                        <p>Vue</p>
                        <div class="xue-k">
                            <div class="xue-te">
                                <p>Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。</p>
                                <p>Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="ti">
            <div class="sheng">
                <img src="./images/ti.jpg" alt="">
            </div>
            <div class="sheng sheng-1">
                <img src="./images/ti.jpg" alt="">
            </div>
        </div>
        <div class="zuopin" id="three">
            <div class="zuoping-bg">
                <div class="ceng">
                    <div class="xuan" id="xuan">
                        <div class="zuo-tu active">
                            <div class="zuo-tu-bg">
                                <a href="http://yang1275833191.gitee.io/changhongguanwang">
                                    <img src="./images/changhong.PNG" alt="">
                                    <div class="ceng-tu">
                                        <p>长虹官网</p>
                                    </div>
                                </a>
                            </div>
                            <div class="zuo-tu-bg">
                                <a href="http://yang1275833191.gitee.io/tengxunxinwen">
                                    <img src="./images/tengxunxinwen.PNG" alt="">
                                    <div class="ceng-tu">
                                        <p>腾讯新闻</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="zuo-tu2">
                            <div class="zuo-tu-bg">
                                <a href=" http://yang1275833191.gitee.io/tianya_mingyue_knife">
                                    <img src="./images/tiandao.PNG" alt="">
                                    <div class="ceng-tu">
                                        <p>天涯明月刀</p>
                                    </div>
                                </a>
                            </div>
                            <div class="zuo-tu-bg">
                                <a href="http://yang1275833191.gitee.io/duitangwang">
                                    <img src="./images/duitang.PNG" alt="">
                                    <div class="ceng-tu">
                                        <p>堆糖</p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <ul class="nav-bg">
                        <li class="active">1</li>
                        <li>2</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main-bg" id="four">
            <div class="main-san">
                <div class="san-1">
                    <div class="san-tu">
                        <img class="icon1" src="images/icon1.png" alt="">
                        <img class="erwei" src="images/erweima.PNG" alt="">
                    </div>
                    <a href="#">
                        <h3>Set up</h3>
                    </a>
                    <p>腾讯QQ</p>
                </div>
                <div class="san-1">
                    <div class="san-tu">
                        <img class="icon1" src="images/icon2.png" alt="">
                        <img class="erwei" src="images/erweima.PNG" alt="">
                    </div>
                    <a href="#">
                        <h3>Listen to me.</h3>
                    </a>
                    <p>微信</p>
                </div>
                <div class="san-1">
                    <div class="san-tu">
                        <img class="icon1" src="images/icon3.png" alt="">
                        <img class="erwei" src="images/dianhua.PNG" alt="">
                    </div>
                    <a href="#">
                        <h3>Contact me</h3>
                    </a>
                    <p>电话</p>
                </div>
            </div>
        </div>

    </div>
    <div class="footer_bg">
        <div class="wrap">
            <div class="footer">
                <div class="span_of_4">
                    <div class="span1_of_4">
                        <h2>近期活动</h2>
                        <ul class="f_nav1">
                            <li>
                                <a  id="li_dian" href="javascript:void(0);">1.杨鹏的近期行程</a>

                            </li>
                            <li><a id="li_dian2" href="javascript:void(0);">2.杨鹏的学习安排</a></li>

                        </ul>

                    </div>
                    <div id="xingcheng" class="xingcheng">
                        <p class="p1">第一步 拼命敲代码</p>
                        <p class="p2">第二步 速学微信小程序</p>
                        <p class="p3">第三步 找工作</p>
                    </div>
                    <div id="guanbi" class="guanbi">

                    </div>
                    <div id="xingcheng_p" class="xingcheng">
                        <p class="p1">第一步 精通HTML CSS</p>
                        <p class="p2">第二步 掌握JavaScript</p>
                        <p class="p3">第三步 熟练运用Vue</p>
                        <p class="p3">第四步 学会微信小程序</p>
                    </div>
                    <div id="guanbi_p" class="guanbi">

                    </div>
                    <div class="span1_of_4">
                        <h2>标签</h2>
                        <ul class="f_nav2">

                            <li><a href="">热爱劳动</a></li>
                            <li><a href="">文艺青年</a></li>

                            <li><a href="">双子座</a></li>
                        </ul>
                    </div>

                    <div class="clear"></div>
                </div>
                <div class="footer_btm">
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="side" id="side">
        <ul>

            <li id="list1"><a href="javascript:void(0);"><div class="sidebox"><img src="images/002.PNG" class="biao">个人简介</div></a></li>
            <li id="list2"><a href="javascript:void(0);"><div class="sidebox"><img src="images/001.PNG" class="biao">掌握技能</div></a></li>
            <li id="list3"><a href="javascript:void(0);" ><div class="sidebox"><img src="images/003.PNG" class="biao">我的作品</div></a></li>
            <li id="list4"><a href="http://yang1275833191.gitee.io/personal_blog" ><div class="sidebox"><img src="images/side_icon02.png">个人博客</div></a></li>
            <li style="border:none;"><a href="javascript:goTop();" class="sidetop"><img src="images/side_icon05.png"></a></li>
        </ul>
    </div>

    <script type="text/javascript">
        window.onload = function(){
            new Progress().renderOne('canvas1',100,5,80);
            new Progress().renderOne('canvas2',100,5,80);
            new Progress().renderOne('canvas3',100,5,70);
            new Progress().renderOne('canvas4',100,5,50);
            new Progress().renderOne('canvas5',100,5,40);

        }
        var index = 0;
        var str = document.getElementById("string").innerHTML;
        function type() {
            if(index == str.length) {
                index = 0;
            }
            document.getElementById("showStr").innerText = str.substring(0, index++);
        }
        setInterval(type, 100);



    </script>
    <script type="text/javascript">
        $(document).ready(function(){

            $(".side ul li").hover(function(){
                $(this).find(".sidebox").stop().animate({"width":"124px"},200).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#3c3939"})
            },function(){
                $(this).find(".sidebox").stop().animate({"width":"54px"},200).css({"opacity":"0.8","filter":"Alpha(opacity=80)","background":"#000"})
            });

        });

        //回到顶部
        function goTop(){
            $('html,body').animate({'scrollTop':0},600);
        }
    </script>
    <script src="js/progress.js"></script>
    <script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
    <script src="js/script.js"></script>

</body>
</html>